<template>
  <el-button v-bind="$attrs" :class="[
    'crud-button',
    `crud-button--${type}`,
    `crud-button--${size}`,
    {
      'crud-button--disabled': disabled,
      'crud-button--loading': loading,
      'crud-button--round': round,
      'crud-button--circle': circle
    }
  ]" :disabled="disabled" :loading="loading" :size="size" :round="round" :circle="circle" @click="handleClick">
    <template v-if="icon && !loading">
      <el-icon :class="['crud-button__icon', { 'crud-button__icon--right': iconPosition === 'right' }]">
        <component :is="icon" />
      </el-icon>
    </template>
    <span v-if="$slots.default" class="crud-button__text">
      <slot></slot>
    </span>
  </el-button>
</template>

<script setup lang="ts">
import { ElButton, ElIcon } from 'element-plus'
import type { Component } from 'vue'

/**
 * 增删改查按钮组件属性接口
 */
interface Props {
  /** 按钮类型：add(新增)、edit(编辑)、delete(删除)、view(查看)、search(搜索)、export(导出)、import(导入)、batch-delete(批量删除) */
  type?: 'add' | 'edit' | 'delete' | 'view' | 'search' | 'export' | 'import' | 'batch-delete' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
  /** 按钮尺寸 */
  size?: 'large' | 'default' | 'small'
  /** 是否禁用 */
  disabled?: boolean
  /** 是否加载中 */
  loading?: boolean
  /** 是否圆角 */
  round?: boolean
  /** 是否圆形 */
  circle?: boolean
  /** 图标组件 */
  icon?: Component
  /** 图标位置 */
  iconPosition?: 'left' | 'right'
}

/**
 * 组件事件接口
 */
interface Emits {
  /** 点击事件 */
  (e: 'click', event: MouseEvent): void
}

// 定义组件属性，设置默认值
const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'default',
  disabled: false,
  loading: false,
  round: false,
  circle: false,
  iconPosition: 'left'
})

// 定义组件事件
const emit = defineEmits<Emits>()

/**
 * 处理按钮点击事件
 * @param event - 鼠标点击事件
 */
const handleClick = (event: MouseEvent): void => {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
.crud-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-color-alpha-20, rgba(96, 122, 251, 0.2));
  }

  // 按钮类型样式
  &--add {
    background: var(--primary-color-light, $primary-color-light);
    color: white;
    border-color: var(--primary-color, $primary-color);

    &:hover:not(.crud-button--disabled) {
      background: var(--primary-color-hover, $primary-color-hover);
      border-color: var(--primary-color-hover, $primary-color-hover);
      box-shadow: 0 2px 8px var(--primary-color-alpha-30, rgba(96, 122, 251, 0.3));
    }

    &:active:not(.crud-button--disabled) {
      background: var(--primary-color-active, $primary-color-active);
      border-color: var(--primary-color-active, $primary-color-active);
    }
  }

  &--edit {
    background: var(--primary-color, $primary-color);
    color: white;
    border-color: var(--primary-color, $primary-color);

    &:hover:not(.crud-button--disabled) {
      background: var(--primary-color-hover, $primary-color-hover);
      border-color: var(--primary-color-hover, $primary-color-hover);
      text-decoration: underline;
    }
  }

  &--delete {
    background: $danger-color;
    color: white;
    border-color: $danger-color;

    &:hover:not(.crud-button--disabled) {
      background: $danger-color-hover;
      border-color: $danger-color-hover;
      text-decoration: underline;
    }
  }

  &--batch-delete {
    background: $danger-color;
    color: white;
    border-color: $danger-color;

    &:hover:not(.crud-button--disabled) {
      background: $danger-color-hover;
      border-color: $danger-color-hover;
      box-shadow: 0 2px 8px rgba($danger-color, 0.3);
    }
  }

  &--view {
    background: $info-color;
    color: white;
    border-color: $info-color;

    &:hover:not(.crud-button--disabled) {
      background: $info-color-hover;
      border-color: $info-color-hover;
    }
  }

  &--search {
    background: $bg-color-gray;
    color: $text-color-primary;
    border-color: $border-color-base;

    &:hover:not(.crud-button--disabled) {
      background: $hover-bg-light;
      border-color: var(--primary-color, $primary-color);
    }
  }

  &--export {
    background: $success-color;
    color: white;
    border-color: $success-color;

    &:hover:not(.crud-button--disabled) {
      background: $success-color-hover;
      border-color: $success-color-hover;
    }
  }

  &--import {
    background: $warning-color;
    color: white;
    border-color: $warning-color;

    &:hover:not(.crud-button--disabled) {
      background: $warning-color-hover;
      border-color: $warning-color-hover;
    }
  }

  &--primary {
    background: var(--primary-color, $primary-color);
    color: white;
    border-color: var(--primary-color, $primary-color);

    &:hover:not(.crud-button--disabled) {
      background: var(--primary-color-hover, $primary-color-hover);
      border-color: var(--primary-color-hover, $primary-color-hover);
    }
  }

  &--success {
    background: $success-color;
    color: white;
    border-color: $success-color;

    &:hover:not(.crud-button--disabled) {
      background: $success-color-hover;
      border-color: $success-color-hover;
    }
  }

  &--warning {
    background: $warning-color;
    color: white;
    border-color: $warning-color;

    &:hover:not(.crud-button--disabled) {
      background: $warning-color-hover;
      border-color: $warning-color-hover;
    }
  }

  &--danger {
    background: $danger-color;
    color: white;
    border-color: $danger-color;

    &:hover:not(.crud-button--disabled) {
      background: $danger-color-hover;
      border-color: $danger-color-hover;
    }
  }

  &--info {
    background: $info-color;
    color: white;
    border-color: $info-color;

    &:hover:not(.crud-button--disabled) {
      background: $info-color-hover;
      border-color: $info-color-hover;
    }
  }

  // 尺寸样式
  &--large {
    height: 40px;
    padding: 0 20px;
    font-size: 16px;

    .crud-button__icon {
      font-size: 18px;
    }
  }

  &--default {
    height: 32px;
    padding: 0 16px;
    font-size: 14px;

    .crud-button__icon {
      font-size: 16px;
    }
  }

  &--small {
    height: 24px;
    padding: 0 12px;
    font-size: 12px;

    .crud-button__icon {
      font-size: 14px;
    }
  }

  // 状态样式
  &--disabled {
    opacity: 0.6;
    cursor: not-allowed;

    &:hover {
      transform: none;
      box-shadow: none;
    }
  }

  &--loading {
    cursor: not-allowed;
  }

  &--round {
    border-radius: 20px;
  }

  &--circle {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;

    &.crud-button--large {
      width: 40px;
      height: 40px;
    }

    &.crud-button--small {
      width: 24px;
      height: 24px;
    }
  }

  // 图标样式
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    &--right {
      order: 1;
    }
  }

  &__text {
    white-space: nowrap;
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .crud-button {
    &--search {
      background: $bg-color-gray-dark;
      color: $text-color-primary-dark;
      border-color: $border-color-base-dark;

      &:hover:not(.crud-button--disabled) {
        background: $hover-bg-light-dark;
        border-color: var(--primary-color, $primary-color);
      }
    }

    &--disabled {
      opacity: 0.5;
    }

    &:focus {
      box-shadow: 0 0 0 2px var(--primary-color-alpha-30, rgba(96, 122, 251, 0.3));
    }
  }
}
</style>
